<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.com">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" th:src="@{https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js}"></script>
    <link rel="stylesheet" th:href="@{/css/register.css}">
    <title>Register Page</title>
</head>
<body>
    <form action="/createuser" method="post" class="register-form">
        <h1>用户注册</h1>
        <input type="hidden" name="id" th:value="${user.id}" />

        <div class="txtb">
            <input type="text" name="username" th:value="${user.name}" th:field="*{user.name}">
            <span data-placeholder="Username"></span>
        </div>

        <div class="txtb">
            <input type="password" name="password" th:value="${user.password}" th:field="*{user.password}">
            <span data-placeholder="Password"></span>
        </div>

        <input type="submit" class="regbtn" value="提 交">
    </form>
    <script type="text/javascript">
        $(".txtb input").on("focus", function(){
            $(this).addClass("focus");
        });
        $(".txtb input").on("blur", function () {
            if($(this).val() == "")
                $(this).removeClass("focus");
        });
    </script>
</body>
</html>